<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		
		#app button ,#root button{
			margin: 5px;
			padding: 5px;
		}
		
		#app button.active {
			background: red;
		}
		
		#app div,#root div {
			width: 500px;
			height: 300px;
			border: 1px solid green;
		}
	</style>
</head>
<script src="lib/Tag.js"></script>
<body>
<div id="app">
	<button>今天</button>
	<button>明天</button>
	<button>后天</button>
	<div>今天的内容</div>
	<div>明天的内容</div>
	<div>后天的内容</div>
</div>
<div id="root">
	<button>娱乐</button>
	<button>体育</button>
	<button>财经</button>
	<div>娱乐的内容</div>
	<div>体育的内容</div>
	<div>财经的内容</div>
</div>
</body>
<script>
	// 面向过程
	// const btns = document.querySelectorAll("#app button");
	// const divs = document.querySelectorAll("#app div");
	// let index = 0;
	// btns.forEach(function(btn,i){
	// 	btn.onclick = function(){
	// 		if(index === i) return;
	// 		btns[index].className= null;// 删除当前选中的按钮样式
	// 		divs[index].style.display = "none";
	// 		index = i;
	// 		btns[index].className = "active";
	// 		divs[index].style.display = "block";
	//
	// 	}
	// 	// 隐藏div
	// 	divs[i].style.display = "none";
	//
	// })
	// btns[index].className = "active";
	// divs[index].style.display = "block";
	
	
	// 优化：
	// const btns = document.querySelectorAll("#app button");
	// const divs = document.querySelectorAll("#app div");
	// const arrColor = ["green","red","blue"];
	// let index = 0;
	// init();
	//
	// function init(){
	// 	btns.forEach(function(btn,i){
	// 		btn.onclick = function(){
	// 			if(index === i) return;
	// 			hide();
	// 			index = i;
	// 			show();
	//
	// 		}
	// 		// 隐藏div
	// 		hide(i);
	//
	// 	})
	// 	show();
	// }
	//
	//
	//
	// function hide(i=index){
	// 	btns[i].style.background= null;// 删除当前选中的按钮样式
	// 	divs[i].style.display = "none";
	// }
	// function show(){
	//     divs[index].style.background = 	btns[index].style.background  = arrColor[index];
	// 	divs[index].style.display = "block";
	// }
	
	
	// 面向对象
	// function Tag() {
	// 	this.btns = document.querySelectorAll("#app button");
	// 	this.divs = document.querySelectorAll("#app div");
	// 	this.arrColor = ["green", "red", "blue"];
	// 	this.index = 0;
	// 	// this.init();
	// }
	//
	// Object.assign(Tag.prototype, {
	// 	init() {
	// 		this.btns.forEach((btn, i)=> {
	// 			btn.onclick = ()=> {
	// 				if (this.index === i) return;
	// 				this.hide();
	// 				this.index = i;
	// 				this.show();
	// 			}
	// 			// 隐藏div
	// 			this.hide(i);
	//
	// 		})
	// 		this.show();
	// 	},
	// 	hide(i = this.index) {
	// 		this.btns[i].style.background = null;// 删除当前选中的按钮样式
	// 		this.divs[i].style.display = "none";
	// 	},
	// 	show() {
	// 		this.divs[this.index].style.background = this.btns[this.index].style.background = this.arrColor[this.index];
	// 		this.divs[this.index].style.display = "block";
	// 	}
	// })
	//
	// const tag = new Tag();
	// tag.init();
	
	new Tag({
		el:"#app"
	});
	
	new Tag({
		el:"#root",
		arrColor:["yellow","skyblue","orange"]
	})
</script>
</html>